<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>项目进度</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/state.css">
</head>
<body>
<header>
    <div class="header_conter" id="userInfo">
        <div class="title">
            CAAE基金申报管理系统
        </div>
        <div class="nav_box">
            <ul>
                <li>
                    <a href="./index.html">
                        <img class="icon" src="./img/nav_index.png" alt="">
                        <p class="nav_title">首页</p>
                    </a>
                </li>
                <li class="active">
                    <a href="./state.html">
                        <img class="icon" src="./img/nav_jd_active.png" alt="">
                        <p class="nav_title">项目进度</p>
                    </a>
                </li>
                <li>
                    <a href="./opinion.html">
                        <img class="icon" src="./img/nav_yjfk.png" alt="">
                        <p class="nav_title">意见反馈</p>
                        <span class="chat_num" v-show="num>0" >{{num}}</span>
                    </a>
                </li>
                <li>
                    <a href="./declare.html">
                        <img class="icon" src="./img/nav_sbjl.png" alt="">
                        <p class="nav_title">申报记录</p>
                    </a>
                </li>
            </ul>
        </div>
  
        <div class="user_box">
            <img class="user_tx" src="./img/tx.png" alt="">
            <p>{{userName}}</p>
            <p style="color: blue; cursor:pointer;" @click="loginOut">退出</p>
        </div>
        
    </div>

</header>


<div class="content_box" id="state" style="background: #F9F9F9;min-height: 100%;">

    <div class="s_conter">
        <div class="s_title">申报进度</div>
        <div class="jd_box">
            <div :class="[item_jd,data.submit ? 'active' : '']">
                <div class="t"></div>
                <div class="t_text" style="left: -245px;">
                    <p>填写申报</p>
                    <div class="dow_icon"  @click="print">打印</div>
                    
                    <i style="color: rgb(250, 12, 12); margin-left: 220px; margin-top: 10px; font-style: normal;text-align: left; display: block;margin-bottom: 4px; ">请您务必在打印前对“打印设置”做如下调整：<br>
                        1.勾选“页眉和页脚”<br>
                        2.查看打印效果预览，确认页边距及页码无误后，开始打印。<br>
                    </i>


                </div>

                

            </div>

            <div :class="[item_jd,data.uploadReturn ? 'active' : '']">
                <div class="t"></div>
                <div class="t_text" style="margin-left: -155px;">
                    <!-- <p>上传申报表</p>
                    <i style="color: #D8D8D8;font-style: normal;display: block;margin-bottom: 4px; ">（已盖章文件/拍照/扫描件）</i>
                    <input class="upload" type="file" multiple="multiple" name="" id="file" accept="image/gif,image/jpeg,image/jpg,image/png,.pdf" @change="upload($event)" style="display: none;">
                    <img src="./img/sc.png" style="width: 49px;height: 21px;cursor: pointer;" alt="" @click="uploadImg"> -->
                    
                    <p>上传</p>
                    
                    <input class="upload" type="file" multiple="multiple" name="" id="file" accept="image/gif,image/jpeg,image/jpg,image/png,.pdf" @change="upload($event)" style="display: none;">
                    <div class="updata_icon" style="text-align: center;" @click="uploadImg">上传</div>

                    
                    <i style="color: #666;position: relative; left: 100px;font-style: normal;text-align: left;display: block;margin-top: 10px; margin-bottom: 4px; ">&nbsp; 上传已盖章文件<br>（主要研究人员签字页/单位意见盖章页/协会理事推荐意见签字页）</i>
                </div>
            </div>
            <div :class="[item_jd,data.toaudit ? 'active' : '']">
                <div class="t"></div>
                <div class="t_text" style="left: 10px;">
                    <p>待评审</p>
                </div>
            </div>
            <div :class="[item_jd,data.auditResult == 1 ? 'active' : '']">
                <div class="t_text" style="left: -50px;">
                    <p>评审结果</p>
                    <!-- margin-left: -90px; -->
                    <i style="color: #666; margin-left: -90px;margin-top: 10px;text-align: left; font-style: normal;display: block;margin-bottom: 4px;margin-right: 5px; ">注：通过评审后，将签字盖章后的纸质版申报书（一式两份）和伦理批件复印件一份寄回协会。</i>
                </div>
            </div>

        </div>

    </div>


    <div class="s_conter" v-show = "data.auditResult == 1" style="margin-top: 20px;">
        <div class="s_title">项目实施进展</div>
        <div class="jd_box">
            <div :class="[item_jd2,schedule.project ? 'active' : '']">
                <div class="t"></div>
                <div class="t_text">
                    <p>予以立项</p>
                </div>
            </div>

            <div :class="[item_jd2,schedule.one ? 'active' : '']">
                <div class="t"></div>
                <div class="t_text" style="left: -53px;">
                    <p>一期</p>
                    <i style="color: #333333;font-style: normal;display: block;margin-bottom: 4px; ">注：务必将正规发票寄回协会</i>

                </div>
            </div>
            <div :class="[item_jd2,schedule.two ? 'active' : '']">
                <div class="t"></div>
                <div class="t_text" style="left: -48px;">
                    <p>二期</p>
                    <i style="color: #333333;font-style: normal;display: block;margin-bottom: 4px; ">中期报告书</i>
                    <i style="color: #333333;font-style: normal;display: block;margin-bottom: 4px; ">注：务必将正规发票寄回协会</i>

                    <div class="dow_icon" @click="download1('1')">下载</div>
                    <input class="upload" type="file" multiple="multiple" name="" id="file1" accept="image/gif,image/jpeg,image/jpg,image/png,.pdf" @change="uploadTwo($event)" style="display: none;">
                    <div class="two_upload" @click="upload1">上传</div>



                </div>
            </div>
            <div :class="[item_jd2,schedule.three ? 'active' : '']">
                <div class="t"></div>
                <div class="t_text" style="left: -162px;">
                    <p>三期</p>
                    
                    <i style="color: #333333;font-style: normal;display: block;margin-bottom: 4px; ">结题报告书</i>
                    <i style="color: #333333;font-style: normal;display: block;margin-bottom: 4px; ">注：1.将签字盖章的纸质版结题报告书原件（包括成果的文件）寄回协会
                        <br>2.务必将正规发票寄回协会</i>
                    <div class="dow_icon" @click="download1('2')">下载</div>
                    <input class="upload" type="file" multiple="multiple" name="" id="file2" accept="image/gif,image/jpeg,image/jpg,image/png,.pdf" @change="uploadThree($event)" style="display: none;">
                    <div class="two_upload" @click="upload2">上传</div>

                </div>
            </div>

            <div :class="[item_jd2,schedule.complete ? 'active' : '']">
                <!-- <div class="t"></div> -->
                <div class="t_text" style="left: 3px;">
                    <p>完成项目</p>
                    <!-- <i style="color: #D8D8D8;font-style: normal;display: block;margin-bottom: 4px; "></i> -->

                </div>
            </div>

        </div>
    </div>

</div>

<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./js/axios.min.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./js/info.js"></script>
<script type="text/javascript" src="./js/qs.min.js"></script>
<script type="text/javascript" src="./js/jqyery.min.js"></script>


<script>
    const stateApp = new Vue({
        el: "#state",
        data: {
            item_jd:"item_jd",
            data:{
                submit:0,
                uploadReturn: 0,
                toaudit: 0,
                auditResult: 0,
                applicationId:"",
                fundId:"",
            },

            item_jd2:"item_jd_2",
            schedule:{
                project: 0,
                one: 0,
                two: 0,
                three: 0,
                complete: 0,
            },
            
        },

        methods: {

            uploadImg(){
                console.log("上传图片111");
                if (!this.data.applicationId) {
                    alert("请先填写申报");
                    return;
                }
                $('#file').click();
            },
            
            upload(e){
                // let file = e.target.files[0];
                let param = new FormData(); //创建form对象
                for (let i = 0; i < e.target.files.length; i++) {
                    let file = e.target.files[i];
                    var index = file.name.lastIndexOf(".");
                    //获取后缀
                    var ext = file.name.substr(index + 1);
                    if (ext == "pdf") {
                        param.append('applicationPicturePDF',file);//通过append向form对象添加数据
                        param.append('uploadType',"applicationPicturePDF");
                        console.log("pdf 进来了");
                    }else{
                        param.append('applicationPictureImg',file);//通过append向form对象添加数据
                        param.append('uploadType',"applicationPictureImg");
                        console.log("图片 进来了");
                    }
                    console.log(file.name + ext);
                }

                param.append("loginId",localStorage.getItem("loginId"));
                console.log(param); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                }; //添加请求头
                var that = this;
                axios.post(BaseUrl + "client/applicationClient/saveApplicationPicture", param, config).then(
                function (response) { 

                    if (response.data.code == 200) {
                        alert(response.data.massage);
                    }else{
                        alert(response.data.massage);
                    }
                    console.log(response);
                    that.reload();
                })
                .catch(function (error) {
                    console.log(error);
                    alert(error);
                });
            },
            // 下载
            download(){

                console.log("下载" + this.data.applicationId);
                if (this.data.applicationId) {
                    let paras = {
                        applicationId:this.data.applicationId,
                        downloadOrPreview :"2",
                    }
                    console.log(paras);
                    let dt = Qs.stringify(paras);
                    var that = this;
                    axios.post(BaseUrl + "client/applicationClient/previewWordFile", dt)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            let previewUrl = response.data.data[0].site;
                            console.log(response.data);
                            window.location.href = previewUrl;
                        }else{
                            alert(response.data.massage);
                        }
                        console.log(response);
                        that.reload();
                    })
                    .catch(function (error) {
                        alert("下载错误，请稍后再试。");
                        console.log(error);
                    })
                }else{ 
                    alert("查不到您的提交申请，请先提交申请。");
                }
            },

            print(){
                console.log("打印");
                if (this.data.applicationId) {
                    window.location.href = "./writeTable.html?applicationId=" + this.data.applicationId + "&typeId=" + this.data.fundId;
                }else{
                    alert("请先填写申报");
                }

                
            },

            reload(){
                var that = this;
                let paras = {
                    "loginId":localStorage.getItem("loginId"),
                };
                console.log(paras);
                var that = this;
                let dt = Qs.stringify(paras);
                axios.post(BaseUrl + "client/applicationClient/reviewProgressListfindByApplicationId",dt)
                .then(
                function(response) {
                    console.log(response)
                    if (response.data.code == 200) {
                        result = response.data.data[0];
                        that.data = result;
                        console.log(result);
                    }else{
                        // alert(response.data.massage);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
            },
            upload1(){
                console.log("上传图片二期");
                $('#file1').click();
            },
            uploadTwo(e){
                // let file = e.target.files[0];
                let param = new FormData(); //创建form对象
                for (let i = 0; i < e.target.files.length; i++) {
                    let file = e.target.files[i];
                    var index = file.name.lastIndexOf(".");
                    //获取后缀
                    var ext = file.name.substr(index + 1);
                    if (ext == "pdf") {
                        param.append('applicationPhaseTwoFilePDF',file);//通过append向form对象添加数据
                        param.append('uploadType',"applicationPhaseTwoFilePDF");
                        console.log("pdf 进来了");
                    }else{
                        param.append('applicationPhaseTwoFileImg',file);//通过append向form对象添加数据
                        param.append('uploadType',"applicationPhaseTwoFileImg");
                        console.log("图片 进来了");
                    }
                    console.log(file.name + ext);
                }

                param.append("loginId",localStorage.getItem("loginId"));
                console.log(param); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                }; //添加请求头
                var that = this;
                axios.post(BaseUrl + "client/applicationClient/saveApplicationPicture", param, config).then(
                function (response) { 

                    if (response.data.code == 200) {
                        alert(response.data.massage);
                    }else{
                        alert(response.data.massage);
                    }
                    console.log(response);
                    that.reload();
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            upload2(){
                console.log("上传图片三期");
                $('#file2').click();
            },
            uploadThree(e){
                // let file = e.target.files[0];
                let param = new FormData(); //创建form对象
                for (let i = 0; i < e.target.files.length; i++) {
                    let file = e.target.files[i];
                    var index = file.name.lastIndexOf(".");
                    //获取后缀
                    var ext = file.name.substr(index + 1);
                    if (ext == "pdf") {
                        param.append('applicationPhaseThreeFilePDF',file);//通过append向form对象添加数据
                        param.append('uploadType',"applicationPhaseThreeFilePDF");
                        console.log("pdf 进来了");
                    }else{
                        param.append('applicationPhaseThreeFileImg',file);//通过append向form对象添加数据
                        param.append('uploadType',"applicationPhaseThreeFileImg");
                        console.log("图片 进来了");
                    }
                    console.log(file.name + ext);
                }

                param.append("loginId",localStorage.getItem("loginId"));
                console.log(param); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                }; //添加请求头
                var that = this;
                axios.post(BaseUrl + "client/applicationClient/saveApplicationPicture", param, config).then(
                function (response) { 

                    if (response.data.code == 200) {
                        alert(response.data.massage);
                    }else{
                        alert(response.data.massage);
                    }
                    console.log(response);
                    that.reload();
                })
                .catch(function (error) {
                    console.log(error);
                });
            },

            // 现在中期报告, 和结题报告模板
            download1(type){

                fileType = "";
                if (type == "1") {
                    console.log("下载中期");
                    fileType = "interimReport";
                    window.location.href = BaseUrl + "client/applicationClient/downloadFundFile?fileType="+ fileType;
                }else{
                    fileType = "final";
                    console.log("下载结题");
                    window.location.href = BaseUrl + "client/applicationClient/downloadFundFile?fileType="+ fileType;
                }

                
            },

        },
        created:function(){

            var that = this;
            let paras = {
                "loginId":localStorage.getItem("loginId"),
            };
            console.log(paras);
            var that = this;
            let dt = Qs.stringify(paras);
            axios.post(BaseUrl + "client/applicationClient/reviewProgressListfindByApplicationId",dt)
            .then(
            function(response) {
                console.log(response)
                if (response.data.code == 200) {
                    result = response.data.data[0];
                    // result.submit = 1;
                    // result.uploadReturn = "1";
                    // result.toaudit = "1";
                    // result.auditResult = 1;

                    console.log(result);
                    that.data = result;

                    // result.schedule = "complete";
                    if (result.schedule == "project") {
                        that.schedule.project = 1;
                    }else if (result.schedule == "one"){
                        that.schedule.project = 1;
                        that.schedule.one = 1;
                    }else if (result.schedule == "two"){
                        that.schedule.project = 1;
                        that.schedule.one = 1;
                        that.schedule.two = 1;
                    }else if (result.schedule == "three"){
                        that.schedule.project = 1;
                        that.schedule.one = 1;
                        that.schedule.two = 1;
                        that.schedule.three = 1;
                    }else if (result.schedule == "complete"){
                        that.schedule.project = 1;
                        that.schedule.one = 1;
                        that.schedule.two = 1;
                        that.schedule.three = 1;
                        that.schedule.complete = 1;
                    }

                    console.log(result);
                }else{
                    // alert(response.data.massage);
                }

            })
            .catch(function (error) {
                console.log(error);
            })
        },
        
    },);



</script>


</body>
</html>